<template>
	<uni-popup ref="popup" type="dialog">
		<view class="dialog-wrap">
			<view class="flex_s">
				<view class="icon-box">
					<image src="/static/image/icon-waring.png" style="width: 35rpx;height: 35rpx;"></image>
				</view>
				<view class="font_size_34">{{$t('pay.attention')}}({{ currentAlarmIndex + 1 }} / {{ alarms.length }})
				</view>
				<view></view>
			</view>
			<!-- 设备二维码无效，请重新添加！ -->
			<!-- <view class="cont">废水箱已满，请及时倾倒 避免影响使用!</view> -->
			<view class="container">
				<view class="alarm-message">{{ getStatus(currentAlarm.alarmTypeName) }}</view>
				<view class="button-group" v-if="alarms.length > 1">
					<view class="btn-box"><button class="btn flex_col_center marg_auto" v-if="currentAlarmIndex > 0"
							@click="prevAlarm">{{$t('previous')}}</button></view>
					<view class="btn-box"><button class="btn flex_col_center marg_auto"
							v-if="currentAlarmIndex < alarms.length - 1" @click="nextAlarm">{{$t('next')}}</button>
					</view>
				</view>
			</view>

			<view class="icon-close" @click="confirm">
				<image src="/static/image/icon-colse.png" style="width: 70rpx;height: 70rpx;"></image>
			</view>

		</view>
	</uni-popup>
</template>

<script>
	export default {
		name: 'WaringPop',
		props: {
			alarms: {
				type: Array,
				default: []
			},
		},
		data() {
			return {
				// alarms: [{
				// 		id: 1,
				// 		alarmTypeName: "净水箱缺水，请及时补充"
				// 	},
				// 	{
				// 		id: 2,
				// 		alarmTypeName: "废水箱已满，请及时倾倒避免影响使用!"
				// 	},
				// 	{
				// 		id: 3,
				// 		alarmTypeName: "请及时补充！"
				// 	}
				// ],
				currentAlarmIndex: 0 // 当前显示的报警信息索引

			};
		},
		computed: {
			currentAlarm() {
				// 计算属性，返回当前报警信息
				return this.alarms[this.currentAlarmIndex];
			}
		},
		methods: {
			getStatus(status) {
				switch (status) {
					case '净水箱缺水，请及时补充！':
						return this.$t('errch')
						break
					default:
						return this.$t('errch.one')
				}
			},
			open() {
				this.$refs.popup.open();
			},
			confirm() {
				this.$refs.popup.close();
				this.$emit('confirm');
			},
			prevAlarm() {
				// 上一条报警信息
				if (this.currentAlarmIndex > 0) {
					this.currentAlarmIndex--;
				}
			},
			nextAlarm() {
				// 下一条报警信息
				if (this.currentAlarmIndex < this.alarms.length - 1) {
					this.currentAlarmIndex++;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.alarm-message {
		padding: 20rpx 55rpx;
		line-height: 52rpx;
		font-size: 32rpx;
	}

	.button-group {
		display: flex;
		justify-content: space-between;

		.btn-box {
			width: 240rpx;
			height: 80rpx;

			.btn {
				width: 240rpx;
				height: 80rpx;
			}
		}

	}

	.dialog-wrap {
		text-align: center;
		padding: 50rpx;
		background: #fff;
		border-radius: 20rpx;
		width: 70vw;
		position: relative;

		.icon-close {
			position: absolute;
			bottom: -120rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}
</style>